<template>
  <div class='not-single' id='not-app-article'>
    <div class='flex flex-col'>
      <div class='main friend-main'>
        <div class='relative'>
          <div class='friend-list rounded-2xl mb-8 lg:mb-0'>
            <div class='links-friends'>
              <FriendCard :list='links'/>
            </div>
          </div>
          <div class='post-html friend-myself-info' style='margin-top: 2rem' v-show='websiteConfig.isLinkApply === 1'>
            <div class='myself-site-info'>
              <el-button type='warning' size='small' plain style='width: 100px;'>
                <a href='/friends/add' role='button' style='opacity: 1;'>快速申请💖</a>
              </el-button>
            </div>
          </div>
          <Comment :commentCount='commentCount' />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onBeforeMount, onMounted, provide, reactive, toRef, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { Comment } from '../components/Comment'
import { useCommentStore } from '@/stores/comment'
import emitter from '@/utils/mitt'
import api from '@/api/api'
import { useAppStore } from '@/stores/app'
import FriendApply from '@/components/FriendComponents/FriendApply.vue'
import { useCommonStore } from '@/stores/common'
import FriendCard from '@/components/kit/FriendCard/index.vue'

export default defineComponent({
  name: 'FriendLink',
  components: {FriendApply, Breadcrumb, Comment, FriendCard },
  setup() {
    const commonStore = useCommonStore()
    const { t } = useI18n()
    const appStore = useAppStore()
    const commentStore = useCommentStore()
    const reactiveData = reactive({
      links: [] as any,
      comments: [] as any,
      haveMore: false as any,
      isReload: false as any,
      commentCount: 0 as number
    })
    const pageInfo = reactive({
      current: 1,
      size: 7
    })
    commentStore.type = 4
    onMounted(() => {
      fetchComments()
    })
    onBeforeMount(()=>{
      fetchLinks()
    })
    provide(
      'comments',
      computed(() => reactiveData.comments)
    )
    provide(
      'haveMore',
      computed(() => reactiveData.haveMore)
    )
    emitter.on('friendLinkFetchComment', () => {
      pageInfo.current = 1
      reactiveData.isReload = true
      fetchComments()
    })
    emitter.on('friendLinkFetchReplies', (index) => {
      fetchReplies(index)
    })
    emitter.on('friendLinkLoadMore', () => {
      fetchComments()
    })
    const fetchLinks = () => {
      api.getFriendLink().then(({ data }) => {
        reactiveData.links = data.data
      })
    }
    const fetchComments = () => {
      const params = {
        type: 4,
        topicId: null,
        current: pageInfo.current,
        size: pageInfo.size
      }
      api.getComments(params).then(({ data }) => {
        reactiveData.commentCount = data.data.count
        if (reactiveData.isReload) {
          reactiveData.comments = data.data.records
          reactiveData.isReload = false
        } else if (data.data.records) {
          reactiveData.comments.push(...data.data.records)
        }
        reactiveData.haveMore = data.data.count > reactiveData.comments.length
        pageInfo.current++
      })
    }
    const fetchReplies = (index: any) => {
      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
        reactiveData.comments[index].replyDTOs = data.data
      })
    }
    return {
      ...toRefs(reactiveData),
      t,
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      isMobile: toRef(commonStore.$state, 'isMobile')
    }
  }
})
</script>

<style lang='scss' scoped>
.myself-site-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-info-list {
  margin: 0;
}

.apply-link-module {
  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 30.21%);
  box-shadow: 0 187px 75px rgba(0, 0, 0, 0.01), 0 105px 63px rgba(0, 0, 0, 0.05), 0 47px 47px rgba(0, 0, 0, 0.09), 0 12px 26px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.1);
}

.friend-content {
  height: 25rem;
  overflow: hidden;
  margin: 0 0 1.5rem 0;
  width: 100%;
  border-radius: 1rem;
}

.friend-content, .friend-list {
  background: var(--s-bg, rgba(0, 0, 0, 0.025));
  box-shadow: var(--box-shadow-white);
}

.friend-myself-info {
  background: var(--s-bg, rgba(0, 0, 0, 0.025)) !important;
  box-shadow: var(--box-shadow-white) !important;
}

.links-friends a {
  color: #4183c4;
  text-decoration: none;
}

.links-friends {
  display: grid;
  opacity: 1;
  visibility: visible;
  animation: var(--animation-ot);
  gap: 3rem;
}
</style>
